<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>评价</title>
		<link rel="stylesheet" type="text/css" href="css/ping_jia.css"/>
		<script type="text/javascript" src="js/flexible.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="nav">
				<a id="back" href="javascript:;"></a>
				<p>评价</p>
			</div>
			<div class="pj">
				<ul class="ul">
					<li>差评</li>
					<li>中评</li>
					<li>好评</li>
				</ul>
			</div>
			<div class="pingjia">
				<ul>
					<li>
						<span>服务质量：</span>
						<p>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
						</p>
					</li>
					<li>
						<span>服务态度：</span>
						<p>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
						</p>
					</li>
					<li>
						<span>服务态度：</span>
						<p>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
							<img src="img/wujiaoxing@2x.png"/>
						</p>
					</li>
				</ul>
				<ul id="jishu">
					<li>技术不错</li>
					<li>技术不错</li>
					<li>技术不错</li>
					<li>技术不错</li>
					<li>技术不错</li>
				</ul>
			</div>
			<div class="talk">
				<textarea name="" rows="" cols="" placeholder="说点什么吧"></textarea>
			</div>
			<div class="submit">
				<button  id="submit1">提交</button>
			</div>
		</div>
		<script type="text/javascript">
			var back = document.getElementById("back");
			var ul = document.getElementsByClassName("ul")[0];
			var li = ul.getElementsByTagName("li");
			var jishu = document.getElementById("jishu");
			var submit1 = document.getElementById("submit1");
			back.addEventListener("touchstart",function(){
				window.history.go(-1);
			})
			ul.addEventListener("touchstart",function(event){
				for(var i=0;i<li.length;i++){
					li[i].style.border = "1px solid #7e7e7e";
					li[i].style.color = "#7e7e7e";
					if(event.target.nodeName.toLowerCase() == "li"){
						event.target.style.border = "1px solid #f9a580";
						event.target.style.color = "#f9a580";
					}
				}
			})
			jishu.addEventListener("touchstart",function(){	
				if(event.target.nodeName.toLowerCase() == "li"){
					event.target.classList.toggle("zan");
				}
			})
			submit1.addEventListener("touchstart",function(event){
				this.style.background = "#e8201e";
			})
			submit1.addEventListener("touchend",function(event){
				this.style.background = "#f23a38";
			})
		</script>
	</body>
</html>
